import  React  from 'react'


export  default  class Child1  extends  React.Component {
 constructor() {
     super()
     this.state={
         val:'香蕉'
     }
 }


    addData=()=>{
        
        /**
         * 
         * 子组件向父组件传递值 this.props.sendData   
         * sendData 自定义方法
         * 
         */
        // this.props.sendData('苹果好吃')
        // 第一种动态传值  
        // this.props.sendData(this.state.val)
        
    }

 
    onSubmit=(e)=>{
 
        e.preventDefault()

        console.log(this.state.val)
  //   第二种动态 传值  子向父传值
        this.props.sendData(this.state.val)
        this.setState({
            val:''
        })


    }

    myChange=(e)=>{

        this.setState({
            val:e.target.value
        })
     
    }
    render() {
        let {list}=this.props
        return(

            <div>
            <h2>  Child1  组件</h2>

            <ul>
                {
                    list.map(v=><li key={v}>{v}</li>)
                }
            </ul>

            <form action=""   onSubmit={this.onSubmit}>
            <input type="text" value={this.state.val}  onChange={this.myChange}/>
             <button>点击提交</button>
            

            </form>

          


            <button  onClick={this.addData}>点击 添加数据</button>


            </div>
        )
    }
}
  
